<!-- WxMenuComponent -->
<template>
  <div class="container">
    <div class="menu-preview-wrap">
      <div class="menu-data-box">
        <ul class="menu-data-list">
          <li class="menu-data-item" v-bind:class="{ active: isActive === index }" v-for="(btn,index) in menu.button" :key="index" @click="onBtnMenuItemSelected(index)">
            <a>
              <i class="icon_menu_dot js_icon_menu_dot dn"></i>
              <span class="menu-data-item-title">{{btn.name}}</span>
            </a>
            <div class="sub-menu-data-box" v-if="isActive === index">
              <ul class="sub-menu-data-list">
                <template  v-if="Array.isArray(btn.sub_button)">
                <li class="sub-menu-data-item" v-for="(subBtn,subIndex) in btn.sub_button" :key="subIndex">
                  <a>
                    <span>{{subBtn.name}}</span>
                  </a>
                </li>
                <li class="sub-menu-data-item" v-if="Array.isArray(btn.sub_button) && btn.sub_button.length<5" >
                  <a>
                    <i class="icon14_menu_add"></i>
                    <span class="menu-data-item-title">添加</span>
                  </a>
                </li>
                </template>
                <template v-else>
                <li class="sub-menu-data-item">
                  <a>
                    <i class="icon14_menu_add"></i>
                    <span class="menu-data-item-title">添加</span>
                  </a>
                </li>
                </template>
              </ul>
            </div>
          </li>
          <li class="menu-data-item"  v-if="Array.isArray(menu.button) &&menu.button.length<3" @click="onBtnMenuItemAdd">
            <a>
              <i class="icon14_menu_add"></i>
              <span class="menu-data-item-title">添加菜单</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="menu-item-editor-wrap">
      <form v-if="isActive > -1">
        <div>
          <label for="menu_data_name">菜单名称</label>
          <input type="text" name="menu_data_name" class="menu-form-input" v-model="activeItemData.name">
        </div>
        <div>
          <label for="menu_data_type">菜单类型</label>
          <input type="radio" class="" name="menu_data_type" v-model="activeItemData.type" value="click" checked>发送消息(Click)
          <input type="radio" class="" name="menu_data_type" v-model="activeItemData.type" value="view">跳转网页
          <input type="radio" class="" name="menu_data_type" v-model="activeItemData.type" value="miniprogram" >跳转小程序
        </div>
        <div class="menu_data_content_wrap" v-if="!Array.isArray(activeItemData.sub_button)">
          <div class="menu_data_type_click" v-if="activeItemData.type ==='click'">
            <div>
              <label for="menu_data_name">Key</label>
              <input type="text" name="menu_data_key" class="menu-form-input" v-model="activeItemData.key">
            </div>
          </div>
          <div class="menu_data_type_view" v-if="activeItemData.type === 'view'">
            <div>
              <label for="menu_data_name">页面地址</label>
              <input type="url" name="menu_data_url" class="menu-form-input" v-model="activeItemData.url">
            </div>
          </div>
          <div class="menu_data_type_miniprogram" v-if="activeItemData.type === 'miniprogram'">
            <div>
              <label for="menu_data_name">小程序的appID</label>
              <input type="text" name="menu_data_appid" class="menu-form-input" v-model="activeItemData.appid">
            </div>
            <div>
              <label for="menu_data_name">页面路径</label>
              <input type="text" name="menu_data_pagepath" class="menu-form-input" v-model="activeItemData.pagepath">
            </div>
          </div>
        </div>
        <div>
          <button @click.prevent="onBtnMenuItemDelete()">删除当前菜单</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
const ButtonItem = {
  name: '新菜单',
  type: 'click',
  key: 'V1001_NEW_MENU',
  url: null,
  media_id: null,
  appid: null,
  pagepath: null
}
export default {
  name: 'WxMenuComponent',
  props: {
    value: {
      type: Object,
      default: function() {
        return { button: [] }
      }
    }
  },
  components: {},
  data: function () {
    return {
      isActive: 2,
      activeItemData: {},
      menu: { button: [] }
    }
  },
  watch: {
    value: function(newVal, oldValue) {
      this.menu = newVal
    }
  },
  methods: {
    onBtnMenuItemAdd: function() {
      let index = this.menu.button.push(Object.assign({}, ButtonItem))
      this.onBtnMenuItemSelected(index - 1)
    },
    onBtnMenuItemDelete: function() {
      this.menu.button.splice(this.isActive, 1)
      this.isActive = -1
    },
    onBtnMenuItemSelected: function(index) {
      this.isActive = index
      this.activeItemData = this.menu.button[index]
    },
    onBtnMenuSubItemAdd: function() {

    },
    onBtnMenuSubItemSelected: function(subIndex) {

    },
    onBtnMenuSubItemDelete: function(subIndex) {
      this.menu.button.splice(subIndex, 1)
    }
  }
}
</script>
<style scoped>
.container{
  padding:10px;
  font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
}
.menu-preview-wrap{
  float: left;
  position: relative;
  width:317px;
  height:580px;
  background: transparent url(http://demo.laji.blog/wechat_menu/css/images/bg_mobile_head_default2968da.png) no-repeat 0 0;
  background-position: 0 0;
  border: 1px solid #e7e7eb;
}
/* .menu-data-wrap{ */
  /* to do somethings */
/* } */
.menu-data-list{
  list-style-type: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  border-top: 1px solid #e7e7eb;
  background: transparent url(http://demo.laji.blog/wechat_menu/css/images/bg_mobile_foot_default2968da.png) no-repeat 0 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding-left: 43px;
}
.menu-data-item{
  box-sizing: border-box;
  line-height: 48px;
  position: relative;
  float: left;
  text-align: center;
  width: 33.33%;
  border-left: 1px solid #e7e7eb;
  /* border-right: 1px solid #e7e7eb; */
  cursor: pointer;
}
.menu-data-item a {
  color: #616161;
}
.menu-data-item.active .menu-data-item-title {
  color: #44b549;
}
.menu-data-item.active {
  border: 1px solid #44b549;
  color: #44b549;
}
.menu-data-item-title{
  white-space: nowrap;
}
.icon14_menu_add {
    background: url(http://demo.laji.blog/wechat_menu/css/images/index_z354723.png) 0 -18px no-repeat;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -2px;
}
.menu-item-editor-wrap{
  position: relative;
  width: auto;
  float: none;
  margin-left: 327px;
  height:580px;
  border: 1px solid #e7e7eb;
}
.sub-menu-data-box {
  position: absolute;
  left: 0;
  width: 100%;
  border: 1px solid #d0d0d0;
  bottom: 60px;
  background-color: #fafafa;
}
.sub-menu-data-list {
  padding-left: 0;
  list-style-type: none;
}
.sub-menu-data-item {
  line-height: 50px;
}
.menu-form-input{
  width: 200px;
}
.menu-form-input{
  padding: 10px;
}
</style>
